<template>
  <el-card class="user-interaction-analysis" shadow="never">
    <template #header>
      <div class="card-header">
        <span>交互分析</span>
        <el-tag
          :type="
            activityLevel.level === 'high'
              ? 'success'
              : activityLevel.level === 'medium'
                ? 'warning'
                : 'danger'
          "
          size="small"
        >
          {{ activityLevel.text }}
        </el-tag>
      </div>
    </template>

    <div class="interaction-analysis">
      <!-- 登录信息 -->
      <div class="login-info">
        <div class="info-grid">
          <div class="info-item">
            <div class="info-icon login">
              <IconifyIconOffline icon="ep:user" />
            </div>
            <div class="info-content">
              <div class="info-label">最后登录</div>
              <div class="info-value">
                {{ formatDateTime(interactionInfo?.lastLoginTime) }}
              </div>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon active">
              <IconifyIconOffline icon="ep:clock" />
            </div>
            <div class="info-content">
              <div class="info-label">最后活跃</div>
              <div class="info-value">
                {{ formatDateTime(interactionInfo?.lastActiveTime) }}
              </div>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon days">
              <IconifyIconOffline icon="ep:calendar" />
            </div>
            <div class="info-content">
              <div class="info-label">登录天数</div>
              <div class="info-value">
                {{ interactionInfo?.loginDays || 0 }}天
              </div>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon sessions">
              <IconifyIconOffline icon="ep:connection" />
            </div>
            <div class="info-content">
              <div class="info-label">总会话数</div>
              <div class="info-value">
                {{ interactionInfo?.totalSessions || 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 活跃度分析 -->
      <div class="activity-analysis">
        <h4>活跃度分析</h4>
        <div class="activity-display">
          <div
            class="activity-circle"
            :style="{ background: activityLevel.color }"
          >
            <div class="activity-time">
              {{ formatActiveTime(interactionInfo?.avgDailyActiveTime || 0) }}
            </div>
            <div class="activity-unit">日均在线</div>
          </div>
          <div class="activity-description">
            <p>
              {{
                getActivityDescription(interactionInfo?.avgDailyActiveTime || 0)
              }}
            </p>
            <div class="activity-level-bar">
              <div
                class="level-progress"
                :style="{
                  width:
                    getActivityPercentage(
                      interactionInfo?.avgDailyActiveTime || 0
                    ) + '%',
                  background: activityLevel.color
                }"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 活跃时间段 -->
      <div
        v-if="interactionInfo?.activeTimeRanges?.length"
        class="active-time-ranges"
      >
        <h4>活跃时间段</h4>
        <div class="time-ranges">
          <el-tag
            v-for="timeRange in interactionInfo.activeTimeRanges"
            :key="timeRange"
            type="info"
            effect="light"
            size="small"
          >
            {{ timeRange }}
          </el-tag>
        </div>
      </div>

      <!-- 使用习惯 -->
      <div class="usage-habits">
        <h4>使用习惯</h4>
        <div class="habits-grid">
          <div class="habit-item">
            <div class="habit-label">平均会话时长</div>
            <div class="habit-value">
              {{
                calculateAvgSessionTime(
                  interactionInfo?.avgDailyActiveTime || 0,
                  interactionInfo?.totalSessions || 1
                )
              }}
            </div>
          </div>
          <div class="habit-item">
            <div class="habit-label">活跃度等级</div>
            <div class="habit-value" :style="{ color: activityLevel.color }">
              {{ activityLevel.text }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { IconifyIconOffline } from "@/components/ReIcon";
import {
  getActivityLevel,
  type UserInteractionInfo
} from "@/api/admin-user-profile";

interface Props {
  interactionInfo?: UserInteractionInfo | null;
}

const props = defineProps<Props>();

const activityLevel = computed(() => {
  return getActivityLevel(props.interactionInfo?.avgDailyActiveTime || 0);
});

const formatDateTime = (timeStr?: string) => {
  if (!timeStr) return "暂无";
  return new Date(timeStr).toLocaleString("zh-CN");
};

const formatActiveTime = (minutes: number): string => {
  if (minutes < 60) {
    return Math.round(minutes) + "分钟";
  }
  const hours = Math.floor(minutes / 60);
  const mins = Math.round(minutes % 60);
  return mins > 0 ? `${hours}小时${mins}分钟` : `${hours}小时`;
};

const getActivityDescription = (avgDailyActiveTime: number): string => {
  if (avgDailyActiveTime >= 180) {
    return "用户非常活跃，每天在线时间很长，是平台的重度用户";
  } else if (avgDailyActiveTime >= 60) {
    return "用户比较活跃，有良好的使用习惯，是平台的中度用户";
  } else if (avgDailyActiveTime >= 30) {
    return "用户活跃度一般，偶尔使用平台，需要提升用户粘性";
  } else {
    return "用户活跃度较低，很少使用平台，需要重点关注";
  }
};

const getActivityPercentage = (avgDailyActiveTime: number): number => {
  // 以240分钟（4小时）为满分
  return Math.min((avgDailyActiveTime / 240) * 100, 100);
};

const calculateAvgSessionTime = (
  avgDailyActiveTime: number,
  totalSessions: number
): string => {
  if (totalSessions === 0) return "0分钟";
  const avgSessionMinutes = avgDailyActiveTime / (totalSessions / 30); // 假设30天的数据
  return formatActiveTime(avgSessionMinutes);
};
</script>

<style lang="scss" scoped>
// 响应式设计
@media (width <= 768px) {
  .user-interaction-analysis {
    .interaction-analysis {
      .login-info {
        .info-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }
      }

      .activity-analysis {
        .activity-display {
          flex-direction: column;
          gap: 16px;
          text-align: center;

          .activity-circle {
            width: 80px;
            height: 80px;

            .activity-time {
              font-size: 12px;
            }
          }
        }
      }

      .usage-habits {
        .habits-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }
      }
    }
  }
}

.user-interaction-analysis {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
  }

  .interaction-analysis {
    display: flex;
    flex-direction: column;
    gap: 24px;

    h4 {
      padding-bottom: 8px;
      margin: 0 0 12px;
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      border-bottom: 1px solid #e5e7eb;
    }

    .login-info {
      .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;

        .info-item {
          display: flex;
          gap: 12px;
          align-items: center;
          padding: 12px;
          background: #f9fafb;
          border: 1px solid #e5e7eb;
          border-radius: 8px;

          .info-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            font-size: 18px;
            color: #fff;
            border-radius: 8px;

            &.login {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }

            &.active {
              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            }

            &.days {
              background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            }

            &.sessions {
              background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            }
          }

          .info-content {
            flex: 1;

            .info-label {
              margin-bottom: 2px;
              font-size: 12px;
              color: #6b7280;
            }

            .info-value {
              font-size: 14px;
              font-weight: 600;
              color: #1f2937;
            }
          }
        }
      }
    }

    .activity-analysis {
      .activity-display {
        display: flex;
        gap: 20px;
        align-items: center;

        .activity-circle {
          display: flex;
          flex-shrink: 0;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100px;
          height: 100px;
          color: #fff;
          border-radius: 50%;

          .activity-time {
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
            text-align: center;
          }

          .activity-unit {
            margin-top: 2px;
            font-size: 10px;
            opacity: 0.9;
          }
        }

        .activity-description {
          flex: 1;

          p {
            margin: 0 0 12px;
            font-size: 14px;
            line-height: 1.5;
            color: #6b7280;
          }

          .activity-level-bar {
            width: 100%;
            height: 6px;
            overflow: hidden;
            background: #e5e7eb;
            border-radius: 3px;

            .level-progress {
              height: 100%;
              border-radius: 3px;
              transition: all 0.3s ease;
            }
          }
        }
      }
    }

    .active-time-ranges {
      .time-ranges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
    }

    .usage-habits {
      .habits-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;

        .habit-item {
          padding: 12px;
          background: #f9fafb;
          border: 1px solid #e5e7eb;
          border-radius: 8px;

          .habit-label {
            margin-bottom: 4px;
            font-size: 12px;
            color: #6b7280;
          }

          .habit-value {
            font-size: 14px;
            font-weight: 600;
            color: #1f2937;
          }
        }
      }
    }
  }
}
</style>
